@charset "utf-8";
#yin-yang {
    width: 100px;
    height: 50px;
    background: #eee;
    border-color: #f00;
    border-width: 5px 5px 55px 5px;
    border-style: solid;
    position: relative;
    margin: 0 auto;
    border-radius: 100%;
}
#yin-yang:after{
    content: "";
    position: absolute;
    right: 0;
    background: #f00;
    border: 20px #eee solid;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    top:50%;
}
#yin-yang:before{
    content: "";
    position: absolute;
    left: 0;
    width: 10px;
    height: 10px;
    border: 20px #f00 solid;
    background: #eee;
    border-radius: 100%;
    top:50%;
}
/*#yin-yang {
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: red;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}

#yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid red;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}

#yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    border: 18px solid #eee;
    border-radius:100%;
    width: 12px;
    height: 12px;
}*/
